<template>
  <div class="star">
    <div class="starimg">
        <!-- 通过:style绑定动态计算的left值 -->
        <div class="starcolor" :style="{ left: computedLeft }"></div>
        <img src="@/assets/images/star.png" alt="星级评分背景">
    </div>
    <div class="stargrade">
        {{ rating }}
    </div>
  </div>
</template>

<script>
export default {
    props:{
        rating: {
            type: Number,
            required: true,
            // 确保rating在0.0-5.0范围内
            validator(value) {
                return value >= 0 && value <= 5;
            }
        }
    },
    computed: {
        // 计算left值的计算属性
        computedLeft() {
            // 当rating为0.0时left是-155px，为5.0时是0px
            // 计算公式：left = (rating / 5) * 155 - 155
            const leftValue = (this.rating / 5) * 155 - 155;
            // 返回带单位的字符串
            return `${leftValue}px`;
        }
    }
}
</script>

<style scoped>
.star{
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    margin: 20px 0;
    display: flex;
    justify-content: start;
    align-items: end;
}
.starcolor{
    width: 155px;
    height: 28px;
    background-color: rgb(255, 187, 0);
    position: absolute;
    top: 0;
    z-index: 1;
}
img{
    height: 30px;
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 2;
}
.starimg{
    background-color: #8d8d7eb6;
    height: 28px;
    width: 153px;
    position: relative;
    overflow: hidden;
}
.stargrade{
    height: 22px;
    font-size: 22px;
    margin: 0 10px;
    color: rgb(255, 187, 0);
}
</style>
